/**
 * 综合趋势
 */
function showTotal(combinedScores) {
    console.log(combinedScores);
    
    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month].totalIndicator);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsTotal').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}


/**
 * 德育趋势
 */
function showDY(combinedScores) {
    // console.log(combinedScores);

    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month]["1"]);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsDY').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}


/**
 * 智育趋势
 */
function showZY(combinedScores) {
    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month]["2"]);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsZY').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}


/**
 * 体育趋势
 */
function showTY(combinedScores) {
    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month]["3"]);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsTY').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}

/**
 * 美育趋势
 */
function showMY(combinedScores) {
    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month]["4"]);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsMY').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}

/**
 * 劳育趋势
 */
function showLY(combinedScores) {
    // 提取标签和 totalIndicator 数据
    const labels = Object.keys(combinedScores);
    const totalIndicators = labels.map(month => combinedScores[month]["5"]);

    // 计算线性回归方程
    const { slope, intercept } = linearRegression(totalIndicators);

    // 生成线性方程的y值
    const linearValues = totalIndicators.map((_, index) => slope * index + intercept);

    // 创建折线图
    const ctx = document.getElementById('cardEchartsLY').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line', // 折线图类型
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total Indicator', // 数据集标签
                    data: totalIndicators,
                    borderColor: '#9999FF', // 线条颜色
                    backgroundColor: 'rgba(75, 192, 192, 0)', // 填充颜色
                    borderWidth: 2,
                    tension: 0.3, // 增加线条平滑度
                    fill: true, // 填充区域
                    datalabels: { // 只在这个数据集上显示数据标签
                        anchor: 'end', // 数据标签的锚点
                        align: 'end', // 数据标签的对齐方式
                        color: 'rgba(0, 0, 0, 0.6)', // 字体颜色
                        font: {
                            weight: 'bold' // 字体加粗
                        },
                        formatter: (value) => value // 显示的值
                    }
                },
                {
                    label: 'Linear Regression', // 线性方程数据集标签
                    data: linearValues,
                    borderColor: 'rgba(0, 0, 0, 0.6)', // 线性回归线的颜色
                    borderWidth: 2,
                    tension: 0, // 直线
                    fill: false, // 不填充
                    borderDash: [5, 5], // 虚线样式
                    datalabels: {
                        display: false
                    }
                }
            ]
        },
        options: {
            responsive: true, // 自适应
            scales: {
                y: {
                    min: 0, // Y轴最小值
                    max: 10, // Y轴最大值
                    grid: {
                        display: false // 隐藏 y 轴的网格线
                    },
                    ticks: {
                        display: false // 隐藏 y 轴的数值
                    }
                },
                x: {
                    grid: {
                        display: false // 隐藏 x 轴的网格线
                    }
                }
            },
            plugins: {
                tooltip: {
                    enabled: true, // 显示 tooltip
                    mode: 'index', // 同时显示所有数据点的 tooltip
                },
                legend: {
                    display: false // 隐藏图例
                }
            }
        },
        plugins: [ChartDataLabels] // 添加插件
    });
}

// 线性回归计算函数
function linearRegression(data) {
    const n = data.length;
    const sumX = data.reduce((sum, _, index) => sum + index, 0);
    const sumY = data.reduce((sum, value) => sum + value, 0);
    const sumXY = data.reduce((sum, value, index) => sum + index * value, 0);
    const sumX2 = data.reduce((sum, _, index) => sum + index * index, 0);

    const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
    const intercept = (sumY - slope * sumX) / n;

    return { slope, intercept };
}
